import React, { Component } from 'react'
import './shangpin.scss'
import { HashRouter, Route, Link } from 'react-router-dom'
import { Rate, Pagination } from 'antd';

import './jquery.exzoom.scss'
import $ from 'jquery'
import lun from './jquery.exzoom'
import './jquery.exzoom.css'
import i1 from '../../../img2/photos/1.png'
import i01 from '../../../img2/001.png'
import i02 from '../../../img2/002.png'
import i03 from '../../../img2/003.png'
import i04 from '../../../img2/004.png'
import i05 from '../../../img2/005.png'
import i06 from '../../../img2/006.png'
import i07 from '../../../img2/007.png'
import i08 from '../../../img2/008.png'
import i09 from '../../../img2/009.png'
import i10 from '../../../img2/0010.png'

import qq from '../../../img2/qq1.png'
import { Radio } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons'
import { message} from 'antd';
import axios from '../../../axios/axios'

import {connect} from 'react-redux';
import cartMethod from '../../../publicMethod.js'
class shangpin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detail: {},
            pics: [],
            num:1
        }
    }
    componentWillMount() {
        axios.get('small/commodity/v1/findCommodityDetailsById?commodityId=' + parseInt(this.props.match.params.id)).then(res => {
            // console.log(res);
            this.setState({
                detail: res.data.result,
                pics: res.data.result.picture.split(',')
            });

            $("#exzoom").exzoom({
                autoPlay: false,
            });//方法调用，务必在加载完后执行
        })
    }
    jian(){
        if(this.state.num<=1){
            message.error('大哥，再减就没了');
        }else{
            this.setState({
                num:this.state.num-1
            })
        }
    }
    jia(){
        if(this.state.num<=this.state.detail.stock){
            this.setState({
                num:this.state.num+1
            })

        }else{
            message.error('大哥，库存不够了');
        }
    }
    gouWuc() {
        var obj = {
            "commodityId":this.state.detail.commodityId,
            "count":this.state.num
        };
        cartMethod.addToCar(obj);
        const params = new FormData();
        var arr=cartMethod.updateJiekou();
        var data = JSON.stringify(arr);
        params.append("data", data);
        console.log(arr);
        axios.put('small/order/verify/v1/syncShoppingCart',params).then(res=>{
            console.log(res);
        });
        
        //发送action
        // console.log(this.props)
        this.props.setAction();
        $('.jg-success').css('display', 'block')
    }
    jxGou() {
        $('.jg-success').css('display', 'none')
    }

    setTrans(n) {
        // $('.sp-bo').style.transform = 'translateX('+n*-1180+'px)';
        $('.sp-bo').css('transform', 'translateX(' + n * -1180 + 'px)')
        $('.sp-tou').find('span').eq(n).addClass('span-jia')
        $('.sp-tou').find('span').eq(n).siblings(n).removeClass('span-jia')
    }
    onChange(e) {
        console.log(e.target.value)
    }
    tocart(){
        this.props.history.push('/shopcart');
    }
    render() {
        return (
            <div>
                <div className="jg-success">
                    <div className="jg-sc">
                        <p><img src={i10} alt="" />已成功加入购物车</p>
                        <div><span onClick={this.jxGou}>继续购物</span><span onClick={this.tocart.bind(this)}>查看购物车</span></div>

                    </div>
                </div>
                <div className="sp-local">
                    你的当前所在位置：{this.state.detail.categoryName}
                </div>
                <div className="sp-header">
                    {/* 放大镜 */}
                    <div className="exzoom" id="exzoom">
                        <div className="exzoom_img_box">
                            <ul className='exzoom_img_ul ul'>
                                {this.state.pics.map((v, i) => {
                                    return (<li key={v}><img src={v} /></li>)
                                })}
                            </ul>
                        </div>
                        <div className="exzoom_nav ii"></div>
                        <p className="exzoom_btn">
                            <Link to="###" className="exzoom_prev_btn"> &lt; </Link>
                            <Link to="###" className="exzoom_next_btn"> &gt; </Link>
                        </p>

                    </div>
                    {/* 介绍 */}
                    <div className="sp-introduce">
                        {/* 左侧 */}
                        <div className="sp-in-l">
                            <p>
                                <i>{this.state.detail.commodityName}</i>
                                {this.state.detail.describe}{this.state.detail.commodityName}

                            </p>
                            <div className="sp-in-code">
                                <div>尺码： <Radio.Group onChange={this.onChange} defaultValue="a" size="small" style={{ marginTop: 16 }}>
                                    <Radio.Button value="170" defaultChecked="true">170</Radio.Button>
                                    <Radio.Button value="175">175</Radio.Button>
                                    <Radio.Button value="180" disabled>180</Radio.Button>

                                </Radio.Group></div>
                                <div>颜色： <Radio.Group checkdColor="#f60" size="small" onChange={this.onChange} style={{ marginTop: 16 }}>
                                    <Radio.Button value="红">红</Radio.Button>
                                    <Radio.Button value="绿">绿</Radio.Button>
                                    <Radio.Button value="蓝">蓝</Radio.Button>

                                </Radio.Group></div>
                            </div>
                            <div className="sp-buy">
                                <span>现价：￥{this.state.detail.price}</span><em>原价￥{this.state.detail.price+100}</em> <i>已经有{this.state.detail.saleNum}人买了此商品</i>
                            </div>
                            <div className="sp-in-num">
                                数量：<p><MinusOutlined onClick={this.jian.bind(this)} /><i>{this.state.num}</i><PlusOutlined onClick={this.jia.bind(this)} /></p><span onClick={this.gouWuc.bind(this)}>加入购物车</span><span>立即购买</span>
                            </div>
                            <div className="sp-enjony">
                                <img src={i06} alt="" />
                                收藏此商品<span>分享到：</span>

                                <img src={i01} alt="" />
                                <img src={i02} alt="" />
                                <img src={i03} alt="" />
                                <img src={i04} alt="" />
                                <img src={i05} alt="" />
                            </div>

                        </div>

                        {/* 右侧 */}
                        <div className="sp-in-r">
                            <p>
                                <HashRouter>
                                    <Link to='/text'>点击进入商家</Link>
                                    <Route path='/text' component={Text}></Route>
                                </HashRouter>
                            </p>
                            <div>
                                <img src={qq} alt="" />
                                <HashRouter>
                                    <Link to='/text'>QQ客服一</Link>
                                    <Route path='/text' component={Text}></Route>
                                </HashRouter>
                            </div>
                            <div>
                                <img src={qq} alt="" />
                                <HashRouter>
                                    <Link to='/text'>QQ客服二</Link>
                                    <Route path='/text' component={Text}></Route>
                                </HashRouter>
                            </div>
                        </div>

                    </div>
                </div>
                {/* Lunbotu */}

                <div className="sp-tou">
                    <span className="span-jia" onClick={this.setTrans.bind(this, 0)}>商品详情</span>
                    <span onClick={this.setTrans.bind(this, 1)}>商品评价</span>
                    <span onClick={this.setTrans.bind(this, 2)}>成交记录</span>
                </div>
                {/* zuiwaiceng */}
                <div className="sp-lun">
                    <div className="sp-bo">
                        {/* 01 */}
                        <div className="sp-tu1">
                            <div dangerouslySetInnerHTML={{ __html: this.state.detail.details }}></div>

                        </div>

                        {/* 02 */}

                        <div className="sp-tu2">
                            <ul>
                                <li className="li">
                                    <div className="sp-tu2-l">
                                        <img src={i08} alt="" />
                                        <span> 张三丰</span>
                                    </div>
                                    <div className="sp-tu2-r">

                                        <div className="p">2016-04-07 <img src={i09} alt="" /></div>
                                        <div className="div">很好吃，昨天收到就弄了一些吃，刚刚有弄了点直接凉拌吃，一个都没坏，卖家人也很热情，货也实惠，买的五斤发六斤，吃完还买哈</div>
                                        <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" />
                                    </div>

                                </li>
                                <li className="li">
                                    <div className="sp-tu2-l">
                                        <img src={i08} alt="" />
                                        <span> 张三丰</span>
                                    </div>
                                    <div className="sp-tu2-r">

                                        <div className="p">2016-04-07 <img src={i09} alt="" /></div>
                                        <div className="div">很好吃，昨天收到就弄了一些吃，刚刚有弄了点直接凉拌吃，一个都没坏，卖家人也很热情，货也实惠，买的五斤发六斤，吃完还买哈</div>
                                        <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" />
                                    </div>

                                </li>
                                <li className="li">
                                    <div className="sp-tu2-l">
                                        <img src={i08} alt="" />
                                        <span> 张三丰</span>
                                    </div>
                                    <div className="sp-tu2-r">

                                        <div className="p">2016-04-07 <img src={i09} alt="" /></div>
                                        <div className="div">很好吃，昨天收到就弄了一些吃，刚刚有弄了点直接凉拌吃，一个都没坏，卖家人也很热情，货也实惠，买的五斤发六斤，吃完还买哈</div>
                                        <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" />
                                    </div>

                                </li>
                                <li className="li">
                                    <div className="sp-tu2-l">
                                        <img src={i08} alt="" />
                                        <span> 张三丰</span>
                                    </div>
                                    <div className="sp-tu2-r">

                                        <div className="p">2016-04-07 <img src={i09} alt="" /></div>
                                        <div className="div">很好吃，昨天收到就弄了一些吃，刚刚有弄了点直接凉拌吃，一个都没坏，卖家人也很热情，货也实惠，买的五斤发六斤，吃完还买哈</div>
                                        <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" />
                                    </div>

                                </li>
                                <li className="li">
                                    <div className="sp-tu2-l">
                                        <img src={i08} alt="" />
                                        <span> 张三丰</span>
                                    </div>
                                    <div className="sp-tu2-r">

                                        <div className="p">2016-04-07 <img src={i09} alt="" /></div>
                                        <div className="div">很好吃，昨天收到就弄了一些吃，刚刚有弄了点直接凉拌吃，一个都没坏，卖家人也很热情，货也实惠，买的五斤发六斤，吃完还买哈</div>
                                        <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" /> <img src={i08} alt="" />
                                    </div>

                                </li>
                            </ul>
                            <div className="sp-tu2-page">
                                <Pagination
                                    total={215}
                                    showSizeChanger
                                    showQuickJumper
                                    showTotal={total => `共 ${total}条`}
                                />
                            </div>
                        </div>

                        {/* 03 */}
                        <div className="sp-tu3">
                            <div className="sp-tu3-top">
                                <span>买家</span>
                                <span>价格</span>
                                <span>数量</span>
                                <span>付款时间</span>
                            </div>
                            <ul>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>

                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三00000000丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>

                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                                <li>
                                    <span>张三丰</span>
                                    <span>￥699.00</span>
                                    <span>1</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>

                                <li>
                                    <span>张三丰</span>
                                    <span>￥6999.00</span>
                                    <span>10</span>
                                    <span>2015-09-10 16:09:14</span>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>

            </div>
        )
    }
}
const mapDispatchToProps=(dispatch)=>{
    return{
        setAction:()=>{
            dispatch({
                type:'add_action'
            })
        }
    }
}
export default connect(null,mapDispatchToProps)(shangpin)